import React from 'react';
import ReactDOM from 'react-dom';

import './myStyl.scss';

// magic comment

class App extends React.Component {
  state = {
    CaptainKirkBio: {},
    Foo: null,
    Bar: null
  };

  componentDidMount() {
    // this.onGetKirkBio();
    this.dynamicImport()
    
  }

  async dynamicImport() {
    console.log('easy dynamic')
    const Foo = (await import('./Foo')).default
    setTimeout(() => {
      this.setState({ Foo });
    }, 2000)
    const Bar = (await import(/* webpackChunkName: "Bar" */'./Bar')).default
    setTimeout(() => {
      this.setState({ Bar })
    }, 1000)
  }

  onGetKirkBio = async () => {
    try {
      const result = await fetch('http://stapi.co/api/v1/rest/character/search', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: {
          title: 'James T. Kirk',
          name: 'James T. Kirk',
        },
      });
      console.log(result.json(), 'result.json()')
      const resultJSON = await result.json();
      const character = resultJSON.characters[0];
      this.setState({ CaptainKirkBio: character });
    } catch (error) {
      console.log('error', error);
    }
  };

  render() {
    const { CaptainKirkBio, Foo, Bar } = this.state;
    return (
      <div className="app">
        <img alt="header" src="/dist/images/github.png" className="app-header" />
        <p>
          We are a most promising species, Mr. Spock, as predators go. Did you know that? I
          frequently have my doubts. I dont. Not any more. And maybe in a thousand years or so, we
          will be able to prove it.
        </p>
        <p>- Captain Kirk</p>
        <section>
          {Object.values(CaptainKirkBio).length === 0 ? (
            <p>Loading User Information</p>
          ) : (
            <p style={{ wordBreak: 'break-all' }}>{JSON.stringify(CaptainKirkBio)}</p>
          )}
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </section>
        {Foo ? <Foo /> : <p>Foo is loading...</p>}
        {Bar ? <Bar /> : <p>Bar Component is loading</p>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));